<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <el-table
      :data="dataList"
      border

      style="width: 100%;">

      <table-tree-column prop="name" header-align="center" align="center" label="页面类型"
                         treeKey="menuId"></table-tree-column>
      <el-table-column prop="parentName" header-align="center" align="center"
                       label="页面浏览(PV)" sortable></el-table-column>
      <el-table-column prop="name" header-align="center" align="center" label="页面PV占比" sortable></el-table-column>
      <el-table-column prop="name" header-align="center" align="center" label="点击量" sortable></el-table-column>
      <el-table-column prop="name" header-align="center" align="center" label="商品加收次数" sortable>
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 0" size="small" type="danger">禁用</el-tag>
          <el-tag v-else size="small">正常</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="name" header-align="center" align="center"
                       label="商品加购次数" sortable></el-table-column>
      <el-table-column prop="name" header-align="center" align="center"
                       label="下单订单数" sortable></el-table-column>
      <el-table-column prop="name" header-align="center" align="center"
                       label="付款订单数" sortable></el-table-column>

    </el-table>

  </div>
</template>

<script>
  import list from "./json.js"
  import {treeDataTranslate} from '@/utils'
  import TableTreeColumn from './table-tree-column'

  export default {
    name: 'HelloWorld',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        dataList: []
      }
    },
    components: {TableTreeColumn},
    created() {
      this.dataList = treeDataTranslate(list.page.list, 'menuId')
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>
